<template>
    <div>
          <ul>
            <li>商品序号</li>
            <li>名称</li>
            <li>价格</li>
            <li>操作</li>
        </ul>

        <ol v-for="(item,index) in list1" :key="index">
            <li >{{index+1}}</li>
            <li>{{item.name}}</li>
            <li>{{item.price}}</li>
            <li><button @click="del(index)">删除</button></li>
        </ol>
    </div>
</template>




<script>
export default {
    props:['list1'],
    data(){
        return{

        }
    },
    methods:{
        del(key){
            this.$emit('del',key)
        }
    }
}
</script>


<style scope>
    ul{
        width: 600px;
        background: orange;
        display: flex;
        justify-content: space-around;
    }
    ol{
        width: 600px;
         display: flex;
        justify-content: space-around;
        list-style: none;

    }
</style>